<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>浮动</title>
</head>
<body>
	<!-- 课程目标
		浮动的使用
		浮动的弊端  脱离文档流,容易产生怪异行为,需采取清除或补救措施
		清除浮动  1.style="clear: both;"  2.加高度  3. 如果子元素都浮动 就可以给父元素加overflow:hidden
	-->
	<style>
		.box{
			width: 400px;
			height: 400px;
			border: 1px solid;
			overflow: hidden;
		}
		.box div{
			width: 100px;
			height: 100px;
		}
		
		.onw{
			background-color: blue;
			height: 100px;
		}
		.two{
			background-color: red;
		}
		
		.onw{
			float: left; /* 脱离文档流 发生了遮盖行为 第二个不见了 */
		}
	</style>
	<div class="box">
		<div class="onw"></div>
		<p style="clear: both;"></p> <!--清除浮动-->
		<div class="two"></div>	
	</div>
</body>
</html>